<template>
  <div class="cardInfo">
    <!-- 头部 -->
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      right-text="评论"
      @click-right="showPopup"
    />
    <!--帖子内容  -->
    <van-row class="head">
      <van-col span="2"></van-col>
      <van-col span="4">
        <!-- 头像 -->
        <img class="avatar" :src="this.list.avatar" alt />
      </van-col>
      <van-col span="14">
        <!-- 作者 -->
        <span class="author">{{this.list.userName}}</span>
        <br />
        <!-- 时间 -->
        <span class="time">{{this.list.createTime}}</span>
      </van-col>
      <van-col span="2">
        <img v-if="flag" @click="del" class="delet" src="../../assets/shanchu.png" alt />
      </van-col>
      <van-col span="2">
        <router-link
          :to="{name:'rewrite',params:{postsId:this.$route.params.postsId,title:this.list.title}}"
        >
          <img v-if="flag" class="rewrite" src="../../assets/bianji.png" alt />
        </router-link>
      </van-col>
    </van-row>
    <van-divider />
    <!-- 正文内容 -->
    <div class="container">
      <h5 class="title">{{this.list.title}}</h5>
      <p class="intro">{{this.list.intro}}</p>
      <img class="coverImg" :src="list.coverImgUrl" alt />
    </div>
    <van-divider />
    <cardDiscuss ref="replayBox" :postsId="this.$route.params.postsId"></cardDiscuss>
    <!-- 评论框 -->
    <van-popup v-model="show" round closeable position="bottom" :style="{ height: '40%' }">
      <van-field
        class="ipt"
        v-model="message"
        rows="1"
        autosize
        label="评论"
        type="textarea"
        placeholder="说你想说的"
      />
      <van-button class="btn" plain type="info" size="small" @click="site">提交评论</van-button>
    </van-popup>
  </div>
</template>
<script>
import { getCardInfo, delCard, site, checkInfo } from "../../api/forum-api";
import { Dialog, ContactCard } from "vant";
import { Toast } from "vant";
import cardDiscuss from "./CardDiscuss";
export default {
  data() {
    return {
      list: [],
      show: false,
      message: "",
      userId: "",
      myId: [],
      flag: false
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  props: {
    postsId: Number
  },
  
  created() {
    this.getCardInfo();
    checkInfo().then(res => {
      this.myId.push(res.data.userId);
      if (this.userId === this.myId[0]) {
          this.flag = true;
          // console.log(1111);
        } else {
          this.flag = false;
          // console.log(this.userId);
        }
    });
  },
  methods: {
    // 返回
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    // 获取帖子详情
    getCardInfo() {
      getCardInfo(this.$route.params.postsId).then(res => {
        this.list = res.data;
        this.userId = this.list.userId;
      });
    },
    // 删除帖子
    del() {
      Dialog.confirm({
        title: "删除帖子",
        message: "您确定删除帖子吗？此操作不可恢复"
      })
        .then(() => {
          delCard(this.$route.params.postsId).then(res => {
            this.$router.go(-1);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    // 评论
    site() {
      site(this.$route.params.postsId, this.message).then(res => {
        // console.log(res)
        Toast.success("评论成功");
        this.$refs.replayBox.getDiscussAll(); //调用子组件的方法 重新加载评论
        this.show = false;
      });
    }
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
    cardDiscuss
  }
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.cardInfo {
  padding-bottom: 50px;
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-block;
  }
  .author {
    font-size: 14px;
    color: tomato;
    margin-top: 10px;
  }
  .time {
    font-size: 12px;
    color: gray;
  }
  .delet {
    width: 15px;
    height: 15px;
  }
  .rewrite {
    width: 14px;
    height: 14px;
  }
  .container {
    padding: 10px 20px;
    .coverImg {
      max-width: 100%;
    }
    .intro {
      font-size: 12px;
      color: black;
      margin-top: 5px;
      margin-bottom: 10px;
    }
  }

  .ipt {
    margin: 50px 10px 10px 10px;
  }
  .btn {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>